/*
  路由器模块
 */

import Vue from 'vue'
import VueRouter from 'vue-router'; // vue的插件，所以肯定会用到vue和核心模块
import About from "../views/About";
import Home from "../views/Home";
import News from "../views/News";
import Message from "../views/Message";
import MessageDetail from "../views/MessageDetail";

// 使用路由插件
Vue.use(VueRouter);

// 暴露路由器
export default new VueRouter({
  linkActiveClass: 'router-link-active', // 配置默认激活的样式,这个是默认值
  routes: [
    {
      path: '/about',
      // component: {About}
      component: About
    },
    {
      path: '/home',
      // component: {Home}
      component: Home,
      children: [ // 嵌套路由
        {
          // path: '/news',// path最左侧的/ 永远代表根路径，所以加#
          path: '/home/news',
          component: News
        },
        {
          path: 'message', // 简化写法
          component: Message,
          children: [
            {
              // path: '/home/message/detail/:id',
              path: 'detail/:id',
              component: MessageDetail
            }
          ]
        },
        {
          path: '', // 当前路径，写 /home 也是一样的想过（这就是设置默认访问路径）
          // redirect: 'news'
          redirect: '/home/news'
        }
      ]
    },
    {
      path: '/',
      redirect: '/about'
    }
  ]
})
